<template>
	<view class="">
		<view class="nav">
			<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-back="true" :background="background"
				:back-text-style="{color: '#fff'}" title="个人信息" back-text="返回" />
		</view>
		<view class="ui-all">
			<view class="avatar" >
				<image  class="imgAvatar" :src="picture"></image>
				<text @click="avatarChoose()">修改头像</text>
				<!-- <view else class="iavatar" :style="'background: url('+avater+') no-repeat center/cover #eeeeee;'"></view> -->
				<u-upload
				:before-remove="beforeRemove" 
				ref="uUpload" 
				:custom-btn="false" 
				:show-upload-list="true" 
				:action="uploadFile.url" 
				:formData="uploadFile.formData" 
				:auto-upload="true" 
				:file-list="fileList"
				:show-progress="true" :deletable="true" :max-count="uploadFile.maxCount" @on-list-change="onListChange"
				 @on-success="OnSuccess"/>
				
			</view>
			<view class="ui-list">
				<text>昵称</text>
				<input type="text" :placeholder="value" :value="userName" @input="bindnickName"
					placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>手机号</text>
				<input disabled="true" type="tel" :placeholder="value" :value="mobile" @input="bindmobile" placeholder-class="place" />
			</view>
			<view class="ui-list right">
				<text>性别</text>
				<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index" :range="sex">
					<view class="picker">
						{{sex[index].name}}
					</view>
				</picker>
			</view>
			<view class="ui-list right">
				<text>生日</text>
				<picker mode="date" :value="date" @change="bindDateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<button class="save" @tap="savaInfo">保 存 修 改</button>
		</view>
	</view>
</template>

<script>
	import {
		policy
	} from '../../api/uploadFile/upload.js'
	import {
		save
	} from '../../api/login/user.js'
	import {
		mapGetters
	} from 'vuex'
	export default {

		data() {
			return {
				// 背景
				background: {
					backgroundColor: '#f8f8f8',

					// 导航栏背景图
					//background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				value: '请填写',
				sex: [{
					id: 0,
					name: '男'
				}, {
					id: 1,
					name: '女'
				}, {
					id: 2,
					name: '未知'
				}],
				index: 0,
				region: ['请填写'],
				date: '请填写',
				url: '',
				picture:'',
				mobile: '',
				uploadFile: {
					url: '',//后端地址
					maxCount: 9, // 最大上传数
					formData: {} ,// 携带的参数
					name: '' // 上传的文件字段名
				},
				userName: '',
				fileList: [],
				lists: [], // 组件内部的文件列表,
			}
		},
		computed: {
			...mapGetters([
				'userID',
				'avatar',
				'nickName',
				'phone',
				'gender',
				'birthday',
			])
		},
		created() {
			this.picture = this.avatar;
			this.userName = this.nickName;
			this.mobile = this.phone;
			if(this.birthday == ''||this.birthday==null){
				this.date = '请填写';
			}else{
				this.date = this.birthday;
			}		
			this.index = this.gender;
		},
		onShow() {
			location.upload();
		},
		mounted() {
			this.getPolicy();
		},
		methods: {
			// 上传图片之前的钩子函数
			beforeUpload() {},
			// 上传成功时返回
			OnSuccess() {
				this.picture = this.uploadFile.formData.host + "/" + this.uploadFile.formData.key
				console.log(this.picture);
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			beforeRemove(index, lists) {
				return true;
			},
			getPolicy() {
				let _self = this;
				policy().then(response => {
					_self.uploadFile.url = response.host
					_self.uploadFile.formData.policy = response.policy;
					_self.uploadFile.formData.signature = response.signature;
					_self.uploadFile.formData.ossaccessKeyId = response.accessid;
					_self.uploadFile.formData.key = response.dir + response.key;
					_self.uploadFile.formData.dir = response.dir;
					_self.uploadFile.formData.host = response.host;
				})
			},
			avatarChoose(){
				this.$refs.uUpload;
			},
			bindPickerChange(e) {
				this.index = e.detail.value;

			},
			bindRegionChange(e) {
				this.region = e.detail.value;

			},
			bindDateChange(e) {
				this.date = e.detail.value;

			},
			bindnickName(e) {
				this.userName = e.detail.value;

			},
			bindmobile(e) {
				this.mobile = e.detail.value;

			},
			savaInfo() {
				let that = this;
				let userId = that.userID;
				let nickName = that.userName;
				let headimg = that.picture;
				let gender = that.index;
				let phone = that.mobile;
				let birthday = that.date;
				let updata = {};
				if (!nickName) {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				updata.nickName = nickName;
				if (!headimg) {
					updata.userPicture=that.headimg;
				}
				updata.userPicture = headimg;
				updata.gender = gender;
				if (that.isPoneAvailable(phone)) {
					updata.phone = phone;
				} else {
					uni.showToast({
						title: '手机号码有误，请重填',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (birthday == "0000-00-00") {
					uni.showToast({
						title: '请选择生日',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				updata.birthday = birthday;
				updata.userId = userId;
				that.updata(updata);
			},
			isPoneAvailable(poneInput) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					return false;
				} else {
					return true;
				}
			},
			async updata(datas) {
				//传后台
				console.log(datas)
				save(datas).then(res => {
					console.log(JSON.stringify(res))
					if (res.header.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '成功',
							duration: 2000
						});
						this.$store.dispatch("userInfo/UPDATEINFO",datas)
						uni.reLaunch({
							url:"../mine/index"
						})
					}
				})
			},
		},
		onLoad() {}
	}
</script>

<style lang="less">
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #030303;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>
